<template>
  <view class="content">
    <u-navbar title="法律咨询" :border-bottom="false" :is-back="false" />
    <view class="padding">
      <u-swiper :list="list" height="294" />
    </view>
    <view class="grid-box">
      <u-grid :col="5" :border="false">
        <u-grid-item bg-color="transparent" v-for="(item,index) in gridData" :key="index" @click="handleItem(item)">
          <image :src="item.image" class="grid-box-img" />
          <view class="grid-text padding-top-sm text-26">{{item.name}}</view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="bg1 flex justify-between align-center padding-left-xl padding-right-lg" @click="handleOnline('在线咨询')">
      <view>
        <view class="text-000 text-xl">在线咨询</view>
        <view class="text-999 text-sm padding-top-sm">一对一咨询服务、快速响应</view>
      </view>
      <view class="bg1-btn radius-200 text-sm text-white text-center">立即咨询</view>
    </view>
    <view class="modal-box padding-lr margin-top-sm flex justify-between align-center flex-wrap">
      <image :src="item.img" class="modal-box-img margin-bottom-sm" v-for="(item,index) in modalData" :key="index"
        @click="handleModalDataItem(item)" />
    </view>
    <u-tabbar v-model="current" :list="tabbarListUser" :border-top="false" inactive-color="#C8C8C8"
      @change="handleTabbar" :is-back="false" />
  </view>
</template>

<script>
  import {
    tabbarListUser,
    tabbarListlLawyer
  } from '@/utils/common.js';
  export default {
    data() {
      return {
        current: 0,
        tabbarListUser,
        gridData: [],
        list: [],
        info: {},
        team: null,
        modalData: [{
          img: '/static/home/bg5.png',
          text: '劳动用工'
        }, {
          img: '/static/home/bg4.png',
          text: '合同纠纷'
        }, {
          img: '/static/home/bg2.png',
          text: '侵权纠纷'
        }, {
          img: '/static/home/bg3.png',
          text: '婚姻家庭'
        }, {
          img: '/static/home/bg6.png',
          text: '法律顾问'
        }, {
          img: '/static/home/bg7.png',
          text: '行政诉讼'
        }]
      }
    },
    onLoad() {
      // 客服
      this.team = uni.getStorageSync('team');
      this.initData();
      this.initBannerData();
      // this.initInfoData();
      if (this.goEasy.getConnectionStatus() == 'disconnected') {
        this.connectGoEasy(); //连接goeasy
      }
    },
    onShow() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        this.$u.api._myIndex().then(res => {
          uni.setStorageSync('userinfo', res.data);
          if (!res.data.nickname) {
            console.log("nickname不存在");
            uni.clearStorage();
            uni.reLaunch({
              url: '/pages/user-login/user-login'
            })
          }
        })
      },
      handleItem(item) {
        let userinfo = uni.getStorageSync('userinfo');
        let message = item.name;
        let currentCustomer = {
          id: userinfo.id,
          name: userinfo.nickname,
          avatar: userinfo.avatar
        }
        uni.navigateTo({
          url: `/pages/chat/chat?textMessate=${item.name}`
        })
      },
      handleModalDataItem(item) {
        uni.navigateTo({
          url: `/pages/chat/chat?textMessate=${item.text}`
        })
      },
      handleOnline(textT) {
        uni.navigateTo({
          url: `/pages/chat/chat`
        })
      },
      initData() {
        this.$u.api._getmdss().then(res => {
          this.gridData = res.data;
        })
      },
      initBannerData() {
        this.$u.api._banners().then(res => {
          this.list = res.data;
        })
      },
      handleTabbar(index) {
        let url = ['/pages/index/index', '/pages/message/message', '/pages/my/my']
        uni.reLaunch({
          url: url[index]
        })
      },
      //连接goeasy
      connectGoEasy() {
        let userinfo = uni.getStorageSync('userinfo');
        this.goEasy.connect({
          id: userinfo.id,
          data: {
            name: userinfo.nickname,
            avatar: userinfo.avatar
          },
          onSuccess: () => {
            console.log('GoEasy connect successfully.')
          },
          onFailed: (error) => {
            console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error
              .content);
          },
          onProgress: (attempts) => {
            console.log('GoEasy is connecting', attempts);
          }
        });
      },
    }
  }
</script>
<style>
  page {
    background: #fff;
  }
</style>
<style scoped lang="scss">
  .grid-box {
    padding: 0 40rpx;

    &-img {
      width: 102rpx;
      height: 102rpx;
    }
  }

  .bg1 {
    width: 690rpx;
    height: 140rpx;
    background-image: url('');
    background-size: 100% 100%;
    margin: 50rpx auto 0 auto;

    &-img {
      width: 100%;
      height: 100%;
    }

    &-btn {
      width: 128rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: linear-gradient(180deg, #8DB1FF 0%, #4C84FF 100%);
    }
  }

  .modal-box {
    width: 100%;

    &-img {
      width: 332rpx;
      height: 192rpx;
    }
  }
</style>